<template>
  <h1>用户注册</h1>
  <el-row :gutter="20">
    <el-col :span="5">
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
    <el-col :span="10">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" />
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="user.region" placeholder="请选择你所在的区域">
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="user.gendor" class="ml-4">
            <el-radio label="1" size="large">男</el-radio>
            <el-radio label="2" size="large">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="兴趣爱好">

          <el-checkbox-group v-model="user.fav">
            <el-checkbox label="篮球"></el-checkbox>
            <el-checkbox label="足球"></el-checkbox>
          </el-checkbox-group>

        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="5">
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
  </el-row>

  <el-dialog v-model="centerDialogVisible" title="用户注册信息" width="50%" center>

    <el-descriptions>
      <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
      <el-descriptions-item label="密码">{{ user.password }}</el-descriptions-item>
      <el-descriptions-item label="所在地">{{ user.region }}</el-descriptions-item>
      <el-descriptions-item label="性别">
        {{ user.gendor }}
      </el-descriptions-item>
      <el-descriptions-item label="兴趣爱好">
        {{ user.fav }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script>
/* eslint-disable */
// 单独引入ElMessageBox
import { ElMessageBox } from 'element-plus'

import { ref } from 'vue'

export default {
  name: 'register',
  data() {
    return {
      user: {
        username: 'root',
        password: '123456',
        fav: ['篮球'],
      },
      centerDialogVisible: false,
    }
  },
  methods: {
    register() {

      this.centerDialogVisible = true;

    }
  }
}
</script>
  